import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

// 使用http后端加载翻译文件，不再直接导入

i18n
  // 使用http后端加载翻译
  .use(Backend)
  // 检测用户语言
  .use(LanguageDetector)
  // 传递i18n实例给react-i18next
  .use(initReactI18next)
  // 初始化i18next
  .init({
    fallbackLng: 'en', // 回退语言改为英文
    supportedLngs: ['en', 'zh'], // 支持的语言列表
    ns: ['translation'], // 命名空间
    defaultNS: 'translation', // 默认命名空间
    load: 'languageOnly', // 只加载语言代码部分
    debug: true, // 开启调试以便查看加载过程
    interpolation: {
      escapeValue: false, // React已经安全地转义了变量
    },
    detection: {
      order: ['localStorage', 'navigator', 'cookie', 'htmlTag', 'path', 'subdomain'],
      caches: ['localStorage'],
      lookupLocalStorage: 'i18nextLng', // 在localStorage中存储的键名
    },
    backend: {
      // 确保路径正确
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      // 添加请求参数以避免缓存问题
      queryStringParams: { v: new Date().getTime() }
    },
    react: {
      // 推荐使用 Suspense
      useSuspense: true,
    },
  });

// 导出获取当前语言的辅助函数
export const getCurrentLanguage = () => {
  return i18n.language || localStorage.getItem('i18nextLng') || 'en';
};

// 导出切换语言的辅助函数
export const switchLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

export default i18n; 